<template>
  <div class="supplierProfile">
    <a-card class="general-card" title="供应商查询">
      <FormHeader :collection="collection" @tap-date="tapDate"></FormHeader>
      <formButtonGroup v-model:columns="columns" v-model:size="size" :config="config" @refresh="init" />
      <a-table
        row-key="id"
        :loading="loading"
        :pagination="pagination"
        :columns="columns"
        :data="data"
        :bordered="false"
        :size="size"
        @page-change="handlePageChange"
        @page-size-change="handlePageSizeChange"
      >
        <template #option>
          <a-space>
            <a-button type="primary" size="small" @click="opArticleNumber"> 查看详情</a-button>
            <a-button @click="edit">编辑</a-button>
          </a-space>
        </template>
      </a-table>
    </a-card>
    <a-modal v-model:visible="editVisible" title="编辑" title-align="start" @ok="handleOk" @cancel="handleCancel">
      <EditForm :gathering="collection"></EditForm>
    </a-modal>
  </div>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './supplierProfile.ts';
import FormHeader from '@com/formHeader/formHeader.vue';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';
import EditForm from '@com/editForm/editForm.vue';

export default {
  components: {
    FormHeader,
    formButtonGroup,
    EditForm,
  },
  setup() {
    const { base, collection, data, opArticleNumber, init, tapDate, handlePageChange, handlePageSizeChange, edit } = importConfig();
    init();
    return {
      ...toRefs(base),
      collection,
      data,
      opArticleNumber,
      init,
      tapDate,
      handlePageChange,
      handlePageSizeChange,
      edit,
    };
  },
};
</script>

<style scoped lang="less">
.supplierProfile {
  // :deep(.arco-table-th) {
  //   &:last-child {
  //     .arco-table-th-item-title {
  //       margin-left: 16px;
  //     }
  //   }
  // }
  :deep(.arco-card-header) {
    border-bottom: none;
  }

  :deep(.arco-card-header-title) {
    text-align: left;
  }

  .action-icon {
    margin-left: 12px;
    cursor: pointer;
  }

  .active {
    color: #0960bd;
    background-color: #e3f4fc;
  }

  .setting {
    display: flex;
    align-items: center;
    width: 200px;

    .title {
      margin-left: 12px;
      cursor: pointer;
    }
  }
}
</style>
